<template>
  <div class="banner-container">
    <div class="swiper-container">
      <swiper
        :modules="modules"
        :slides-per-view="1.3"
        :space-between="20"
        :centered-slides="true"
        :loop="true"
        :autoplay="true"
        :breakpoints="breakpoints"
        class="swiper">
        <swiper-slide v-for="item in carouselItems" :key="item.id">
          <div class="slide-wrapper">
            <img :src="item.image" :alt="item.alt" class="slide-image" />
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Autoplay } from 'swiper/modules';
  import 'swiper/css';

  // Swiper 模块
  const modules = [Autoplay];

  // 轮播图数据
  const carouselItems = ref([
    {
      id: 1,
      image: 'https://imgs.nexbie.com/uploads/1cf81ae25ef54275a97f493f2972883d.jpg',
      alt: 'Design Image 1',
    },
    {
      id: 2,
      image: 'https://imgs.nexbie.com/uploads/eda4ed283d14467585d083d6bf6479b3.jpg',
      alt: 'Design Image 2',
    },
    {
      id: 3,
      image: 'https://imgs.nexbie.com/uploads/2a70976043194d72b39ed834f6a7fbda.jpg',
      alt: 'Design Image 3',
    },
    {
      id: 4,
      image: 'https://imgs.nexbie.com/uploads/1cf81ae25ef54275a97f493f2972883d.jpg',
      alt: 'Design Image 4',
    },
    {
      id: 5,
      image: 'https://imgs.nexbie.com/uploads/eda4ed283d14467585d083d6bf6479b3.jpg',
      alt: 'Design Image 5',
    },
  ]);

  // 响应式断点配置
  const breakpoints = {
    320: {
      slidesPerView: 1.2,
      spaceBetween: 15,
      centeredSlides: true,
    },
    768: {
      slidesPerView: 1.3,
      spaceBetween: 20,
      centeredSlides: true,
    },
    1024: {
      slidesPerView: 1.3,
      spaceBetween: 20,
      centeredSlides: true,
    },
  };
</script>

<style scoped lang="scss">
  .banner-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    // padding: 24px;
  }

  .swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    max-height: 320px;
  }

  .swiper {
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 8px;

    // 自定义 Swiper 样式
    :deep(.swiper-wrapper) {
      align-items: stretch;
    }

    :deep(.swiper-slide) {
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: auto;
    }
  }

  .slide-wrapper {
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slide-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
    display: block;
  }
</style>
